<template>
    <div class="container">
        <h3>供应商</h3>
            <el-row style="margin-top:20px;">
                <el-col :span="7">
                    <el-input placeholder="请输入关键词" v-model="searchName" style="width:300px;">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>

                        <el-button slot="append" @click="handleSearch">搜索</el-button>
                    </el-input>
                </el-col>
                <el-button style="float:right; margin-right: 10px" @click="download">模板下载</el-button>
                    <el-upload
                        class="upload-daoru"
                        ref="upload"
                        :action="action"
                        :on-change="uploadonchange"
                        accept=".xlsx,.xls"
                        :show-file-list='false'
                        :auto-upload="false">
                        <el-button slot="trigger" size="small">导入模板</el-button>
                    </el-upload>
                <router-link to="supplier/added"><el-button v-if="!added" type="primary" style="float:right; margin-right: 10px;">新增</el-button></router-link>
            </el-row>
            <el-table
                :data="tableData"
                border
                ref="multipleTable"
                header-cell-class-name="table-header"
                style="margin-top:20px;"
            >
                <el-table-column prop="supplierName" sortable label="供应商名称"></el-table-column>
                <el-table-column prop="area" sortable label="所在地区"></el-table-column>
                <el-table-column prop="userName" sortable label="联系人"></el-table-column>
                <el-table-column prop="phone" sortable label="联系方式"></el-table-column>
                <el-table-column prop="remark" sortable label="备注"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button
                            v-if="!check"
                            type="text"
                            style="color: #409EFF;"
                            @click="handlecheck(scope.$index, scope.row)"
                        >查看</el-button>
                        <el-button type="text">
                            <el-dropdown style="color: #409EFF; font-size:12px">
                                <span class="el-dropdown-link">
                                    更多
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                            <el-button
                                        type="text"
                                        v-if="!edit"
                                        @click="handleEdit(scope.$index, scope.row)"
                                    >编辑</el-button>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <el-button
                                            type="text"
                                            style="color:red;"
                                            v-if="!del"
                                            @click="handleDelete(scope.$index, scope.row)"
                                        >删除</el-button>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage"  @current-change="handleCurrentChange" :total="total" style="margin-top:20px"></el-pagination>
    </div>
</template>

<script>
    import {supplier_findByList,supplier_delete,template_importSupplier} from '@/request/api'
    import {CodeToText} from 'element-china-area-data'
    export default {
        data() {
            return {
                searchName: '',
                tableData: [],
                currentPage:1,
                pagesize:10,
                total:0,
                added:true,
                edit:true,
                check:true,
                del:true,
                action:''
            };
        },
        created(){

        },
        mounted(){
            // console.log(this.$store.state.token)
            this.init()
            this.judgmentAuthority()
        },
        methods: {
            init(){
                let data = {
                    page:this.currentPage,
					searchName:this.searchName
                }
                supplier_findByList(data).then((res)=>{
                    this.tableData = res.rows
                    this.total = res.total
					for (let i = 0; i < this.tableData.length; i++) {
					  var list = this.tableData[i].area.split(",")
					  var arr = ""
					  for (let k = 0; k < list.length; k++) {
					      arr += CodeToText[list[k]] + "/"
					  }
					    this.tableData[i].area = arr.substr(0,arr.length-1)
					}
                })
            },
            download(){
                const companyId =  localStorage.getItem('companyId')
                //  window.location.href = "http://" + window.location.host + "template/toSupplier?" + companyId;
                 window.location.href = "http://grove.cpzsyun.com:81/api" + "/plant/template/toSupplier?" + companyId;
                //  window.location.href = "http://grove.cpzsyun.com:81/api" + "/plant/template/toCraft?appId=002&companyId=" + companyId;
                // window.location.href = "http://47.104.241.124:8901/user/outUser";
                // window.location.href = "http://192.168.0.148:8884/template/toSupplier?" + companyId
            },
            uploadonchange(file) {
                let formData = new FormData();
                formData.append('file', file.raw);
                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                };
                template_importSupplier(formData).then((res) =>{
                    if (res.code == 200) {
                        this.$notify({
                            title: '操作成功',
                            message: '导入成功',
                            type: 'success'
                        });
                        this.init()
                    } else{
                        this.$notify.error({
                            title: '操作失败',
                            message: '导入失败',
                            type: 'error'
                        });
                    }
                })
            },
            handleCurrentChange(val){
                this.currentPage = val
                this.init()
            },

            handlecheck(index,row){
                this.$router.push({
                    path: '/supplier/check',
                    query: { id: row.id }
                });
            },

            //搜索
            handleSearch(){
                this.currentPage = 1
                this.init()
            },
            //跳转编辑页面
            handleEdit(index,row){
                this.$router.push({
                    path: '/supplier/edit',
                    query: { id: row.id }
                });
            },

            //删除
            handleDelete(index,row){
                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    supplier_delete(row.id).then((res)=>{
                        this.$notify.error({
                            title: '提示',
                            message: '删除成功',
                            type: 'success'
                        });
						this.init()
                    })

                })

                // });
            },

            //判定操作按钮显示
            judgmentAuthority() {
                var type = JSON.parse(localStorage.getItem('panduanzhuangtai'));
                type.map((item1) => {
                    if (item1.name == '供应商管理' && item1.children != null) {
                        for (var i = 0; i < item1.children.length; i++) {
                            if (item1.children[i].name == '新增') this.added = false;
                            if (item1.children[i].name == '编辑') this.edit = false;
                            if (item1.children[i].name == '查看') this.check = false;
                            if (item1.children[i].name == '删除') this.del = false;
                        }
                    }
                });
            }

        }
    }
</script>

<style scoped lang="less">
/deep/.upload-daoru{
    background: #eee;
    .el-upload{
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px
    }
}
/* .el-row{ margin-bottom: 20px;} */
 .el-pagination{
    text-align: center;
}
/* .el-select .el-input {
width: 130px;
} */
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    /* border-right: none; */
}
.el-col{
    margin-bottom:0;
}
</style>
